<template>
  <div>
    <div class="statusContainer">
      <div class="statusBox" :key="index + 'status'" v-for="(item, index) in statusList">
        <span
          @click="handleInfo(item)"
          :class="item.status == 0 ? 'WPZ' : item.status == 1 ? 'WJL' : item.status == 2 ? 'JL' : 'DX'"
        >
        </span>
      </div>
    </div>
    <detail-modal ref="detailModal" />
  </div>
</template>

<script>
import detailModal from '@/views/baseStationChannel/modules/detailModal'
export default {
  components: {
    detailModal,
  },
  props: {
    statusList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      // statusList: [
      //   { status: 0 },
      //   { status: 2 },
      //   { status: 3 },
      //   { status: 1 },
      //   { status: 0 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 2 },
      //   { status: 0 },
      //   { status: 3 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 2 },
      //   { status: 3 },
      //   { status: 1 },
      //   { status: 0 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 2 },
      //   { status: 0 },
      //   { status: 3 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      // ],
    }
  },
  created() {
    console.log(this.statusList)
  },
  methods: {
    handleInfo(row) {
      if (row.status == 1 || row.status == 2) this.$refs.detailModal.visible = true
    },
  },
}
</script>

<style lang="less" scoped>
.statusContainer {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
}
.statusBox {
  width: 12.5%;
  text-align: center;
  span {
    cursor: pointer;
  }
}
.WPZ,
.WJL,
.JL,
.DX {
  display: inline-block;
  width: 25px;
  margin: auto;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
}
.WPZ {
  background: red;
}
.WJL {
  background: rgb(230, 215, 19);
}
.JL {
  background: rgb(80, 226, 60);
}
.DX {
  background: rgb(119, 118, 118);
}
</style>
